<template>
  <div class="silder-nav">
    <div class="title">
      <a-icon type="icon-Union4" class="icon"></a-icon>
      <span>{{ title }}</span>
    </div>
    <a-menu
      v-model:openKeys="state.openKeys"
      v-model:selectedKeys="state.selectedKeys"
      mode="inline"
      theme="dark"
      :inline-collapsed="state.collapsed"
      :items="items"
      @click="handleMenuClick"
    ></a-menu>
  </div>
</template>

<script setup>
import { reactive, watch, h, computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMenuStore } from '@/stores/menuStore'
const store = useMenuStore()
const router = useRouter()
const route = useRoute()

import {
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
  UserOutlined,
  BarChartOutlined,
} from '@ant-design/icons-vue'

const state = reactive({
  collapsed: false,
  selectedKeys: [],
  openKeys: ['sub1'],
  preOpenKeys: ['sub1'],
})
const title = ref('')
const items = computed(() => {
  // 解析 localStorage 中的用户数据
  let userStr = localStorage.getItem('user')
  let user = userStr ? JSON.parse(userStr) : null
  if (user && user.userRole === 'hr') {
    title.value = '简历筛选系统'
    return [
      {
        key: '1',
        icon: () => h(PieChartOutlined),
        label: '首页',
        title: '首页',
        index: '/',
      },
      {
        key: '2',
        icon: () => h(DesktopOutlined),
        label: '职位管理',
        title: '职位管理',
        index: '/positionManage',
      },
      {
        key: '3',
        icon: () => h(MailOutlined),
        label: '邀约管理',
        title: '邀约管理',
        index: '/invitationManage',
      },
      {
        key: '4',
        icon: () => h(BarChartOutlined),
        label: '申请管理',
        title: '申请管理',
        index: '/positionCvCount',
      },
      {
        key: '5',
        icon: () => h(AppstoreOutlined),
        label: '简历池管理',
        title: '简历池管理',
        index: '/CVPollManage',
      },
      {
        key: '6',
        icon: () => h(InboxOutlined),
        label: '数据分析',
        title: '数据分析',
        index: '/dataAnalusis',
      },
      {
        key: '7',
        icon: () => h(UserOutlined),
        label: '待办',
        title: '待办',
        index: '/todo',
      },
    ]
  } else if (user && user.userRole === 'user') {
    title.value = '招聘平台'
    return [
      {
        key: '1',
        icon: () => h(PieChartOutlined),
        label: '首页',
        title: '首页',
        index: '/',
      },
      {
        key: '2',
        icon: () => h(DesktopOutlined),
        label: '职位列表',
        title: '职位列表',
        index: '/positionList',
      },
      {
        key: '3',
        icon: () => h(MailOutlined),
        label: '我的邀约',
        title: '我的邀约',
        index: '/myInvitation',
      },
      {
        key: '4',
        icon: () => h(InboxOutlined),
        label: '我的申请',
        title: '我的申请',
        index: '/applyManage',
      },
      {
        key: '5',
        icon: () => h(AppstoreOutlined),
        label: '投递流程',
        title: '投递流程',
        index: '/deliveryProcess',
      },
      {
        key: '6',
        icon: () => h(UserOutlined),
        label: '个人中心',
        title: '个人中心',
        index: '/userInfo',
      },
    ]
  }
  // 增加默认返回值
  return []
})

const handleMenuClick = e => {
  const item = items.value.find(item => item.key === e.key)
  if (item && item.index) {
    console.log(item.index)
    router.push(item.index).catch(error => {
      console.error('路由跳转出错:', error)
    })
  }
  if (item) {
    store.currentMenu = item.title
  }
}

const updateSelectedKeys = () => {
  const currentPath = route.path
  const currentItem = items.value.find(item => item.index === currentPath)
  if (currentItem) {
    state.selectedKeys = [currentItem.key]
    store.currentMenu = currentItem.title
  }
}

onMounted(() => {
  updateSelectedKeys()
})

watch(
  () => route.path,
  () => {
    updateSelectedKeys()
  },
)
</script>

<style lang="scss" scoped>
.silder-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 210px;
  background-color: #011427;
}

.title {
  height: 50px;
  background-color: #022344;
  font-size: 16px;
  text-align: center;
  color: #e8e8e8;
  line-height: 50px;

  .icon {
    margin-right: 10px;
    font-size: 16px;
  }
}
</style>
